<template>
  <view class="cart-and-specs">
    <!-- 底部购物车 -->
    <view class="cart-bar" v-if="cartItemCount > 0">
      <view class="cart-info" @click="toggleCartPanel">
        <view class="cart-icon">
          <text class="icon-cart">&#xe63f;</text>
          <view class="cart-badge">{{ cartItemCount }}</view>
        </view>
        <text class="cart-price">¥{{ cartTotalPrice.toFixed(2) }}</text>
      </view>
      <view class="checkout-btn" @click="goToCheckout">去结算</view>
    </view>
    
    <!-- 购物车弹出面板 -->
    <view class="cart-panel" v-if="showCartPanel">
      <view class="cart-panel-mask" @click="toggleCartPanel"></view>
      <view class="cart-panel-content" :class="{'cart-panel-show': showCartPanel}">
        <!-- 购物车头部 -->
        <view class="cart-panel-header">
          <view class="cart-panel-title">购物车</view>
          <view class="cart-panel-action" @click="clearCart">
            <text class="icon-trash">清空</text>
          </view>
        </view>
        
        <!-- 购物车列表 -->
        <scroll-view class="cart-panel-list" scroll-y>
          <view class="cart-panel-item" v-for="(item, index) in cartStore.state.items" :key="index">
            <view class="cart-item-left">
              <view class="cart-item-name">{{ item.name }}</view>
              <view class="cart-item-spec" v-if="item.selectedTemp || item.selectedSugar">
                <text>{{ item.selectedTemp }}</text>
                <text v-if="item.selectedTemp && item.selectedSugar">，</text>
                <text>{{ item.selectedSugar }}</text>
              </view>
            </view>
            <view class="cart-item-right">
              <view class="cart-item-price">¥{{ item.price.toFixed(2) }}</view>
              <view class="cart-item-counter">
                <view class="counter-btn minus" @click="decreaseCartItem(item)">-</view>
                <view class="counter-num">{{ item.quantity }}</view>
                <view class="counter-btn plus" @click="increaseCartItem(item)">+</view>
              </view>
            </view>
          </view>
        </scroll-view>
        
        <!-- 购物车底部 -->
        <view class="cart-panel-footer">
          <view class="cart-total">
            <text>合计：</text>
            <text class="cart-total-price">¥{{ cartTotalPrice.toFixed(2) }}</text>
          </view>
          <view class="cart-checkout" @click="goToCheckout">去结算</view>
        </view>
      </view>
    </view>
    
    <!-- 规格选择弹窗 -->
    <view class="specs-selector" v-if="showSpecs">
      <view class="mask" @click="handleClose"></view>
      <view class="selector-content">
        <!-- 关闭按钮 -->
        <view class="close-btn" @click="handleClose">
          <text class="close-icon">×</text>
        </view>
        
        <!-- 商品信息 -->
        <view class="product-info">
          <image class="product-image" :src="currentProduct.imgUrl" mode="aspectFill"></image>
          <view class="product-details">
            <view class="product-name">{{ currentProduct.name }}</view>
            <view class="product-desc">{{ currentProduct.description }}</view>
            <view class="product-price">¥{{ currentProduct.price }}</view>
            <view class="product-size">杯型:{{ currentProduct.size }}</view>
          </view>
        </view>
        
        <!-- 温度选择 -->
        <view class="specs-section">
          <view class="section-title">温度</view>
          <view class="options-list">
            <view 
              v-for="(temp, index) in tempOptions" 
              :key="'temp-'+index"
              :class="['option-item', selectedTemp === temp ? 'active' : '']"
              @click="selectedTemp = temp"
            >
              <text>{{ temp }}</text>
            </view>
          </view>
        </view>
        
        <!-- 糖度选择 -->
        <view class="specs-section">
          <view class="section-title">甜度</view>
          <view class="options-list">
            <view 
              v-for="(sugar, index) in sugarOptions" 
              :key="'sugar-'+index"
              :class="['option-item', selectedSugar === sugar ? 'active' : '']"
              @click="selectedSugar = sugar"
            >
              <text>{{ sugar }}</text>
            </view>
          </view>
        </view>
        
        <!-- 数量选择 -->
        <view class="quantity-section">
          <view class="section-title">数量</view>
          <view class="quantity-selector">
            <view class="quantity-btn minus" @click="decreaseQuantity">-</view>
            <view class="quantity-value">{{ quantity }}</view>
            <view class="quantity-btn plus" @click="increaseQuantity">+</view>
          </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="bottom-actions">
          <view class="selected-info">
            <text>{{ selectedTemp }}，{{ selectedSugar }}</text>
          </view>
          <view class="action-buttons">
            <view class="action-btn buy-now" @click="buyNow">立即购买</view>
            <view class="action-btn add-to-cart" @click="addToCart">加入购物车</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue';
import cartStore from '../../common/store/cart.js';
import * as uniApi from '../../common/utils/uni-api.js';

// 定义 props
const props = defineProps({
  navigateToCheckout: {
    type: Function,
    required: true
  }
});

// 定义 emit
const emit = defineEmits(['show-cart-details']);

// 购物车相关数据
const cartItemCount = computed(() => {
  return cartStore.getCartItemCount();
});

const cartTotalPrice = computed(() => {
  return cartStore.getCartTotalPrice();
});

// 购物车面板显示状态
const showCartPanel = ref(false);

// 切换购物车面板
const toggleCartPanel = () => {
  showCartPanel.value = !showCartPanel.value;
};

// 规格选择相关数据
const showSpecs = ref(false);
const currentProduct = ref({
  id: '',
  name: '',
  description: '',
  price: 0,
  imgUrl: '',
  size: '600ml'
});

// 温度选项
const tempOptions = ref(['正常冰', '少冰', '去冰', '常温', '热']);
const selectedTemp = ref('正常冰');

// 糖度选项
const sugarOptions = ref(['无糖（已难喝）', '3分糖', '5分糖', '7分糖（标准甜）']);
const selectedSugar = ref('7分糖（标准甜）');

// 数量
const quantity = ref(1);

// 打开规格选择
const openSpecsSelector = (product) => {
  currentProduct.value = product;
  showSpecs.value = true;
  resetSelections();
};

// 关闭规格选择
const handleClose = () => {
  showSpecs.value = false;
};

// 重置选择项
const resetSelections = () => {
  selectedTemp.value = '正常冰';
  selectedSugar.value = '7分糖（标准甜）';
  quantity.value = 1;
};

// 数量增减方法
const increaseQuantity = () => {
  if (quantity.value < 99) {
    quantity.value++;
  }
};

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

// 加入购物车
const addToCart = () => {
  const selectedProduct = {
    ...currentProduct.value,
    selectedTemp: selectedTemp.value,
    selectedSugar: selectedSugar.value,
    quantity: quantity.value
  };
  
  cartStore.addToCart(selectedProduct);
  handleClose();
};

// 立即购买
const buyNow = () => {
  const selectedProduct = {
    ...currentProduct.value,
    selectedTemp: selectedTemp.value,
    selectedSugar: selectedSugar.value,
    quantity: quantity.value
  };
  
  cartStore.addToCart(selectedProduct);
  handleClose();
  goToCheckout();
};

// 显示购物车详情
const showCartDetails = () => {
  toggleCartPanel();
};

// 跳转到结算页面
const goToCheckout = () => {
  props.navigateToCheckout();
};

// 增加购物车商品数量
const increaseCartItem = (item) => {
  cartStore.updateItemQuantity(item.id, item.quantity + 1);
};

// 减少购物车商品数量
const decreaseCartItem = (item) => {
  if (item.quantity > 1) {
    cartStore.updateItemQuantity(item.id, item.quantity - 1);
  } else {
    cartStore.removeFromCart(item.id);
  }
};

// 清空购物车
const clearCart = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清空购物车吗？',
    success: function(res) {
      if (res.confirm) {
        cartStore.clearCart();
        showCartPanel.value = false;
      }
    }
  });
};

// 暴露方法给父组件
defineExpose({
  openSpecsSelector
});
</script>

<style lang="scss" scoped>
.cart-and-specs {
  /* 底部购物车栏 */
  .cart-bar {
    position: fixed;
    bottom: 130rpx;
    left: 30rpx;
    right: 30rpx;
    height: 90rpx;
    background-color: #333;
    border-radius: 45rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
    z-index: 10;
    
    .cart-info {
      display: flex;
      align-items: center;
      
      .cart-icon {
        width: 60rpx;
        height: 60rpx;
        background-color: #8cc152;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        
        .icon-cart {
          font-size: 30rpx;
          color: #fff;
        }
        
        .cart-badge {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          min-width: 36rpx;
          height: 36rpx;
          border-radius: 18rpx;
          background-color: #ff5d5d;
          color: #fff;
          font-size: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 6rpx;
        }
      }
      
      .cart-price {
        font-size: 32rpx;
        color: #fff;
        margin-left: 20rpx;
        font-weight: 500;
      }
    }
    
    .checkout-btn {
      height: 70rpx;
      padding: 0 30rpx;
      background-color: #8cc152;
      color: #fff;
      font-size: 28rpx;
      border-radius: 35rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
    }
  }

  /* 购物车弹出面板 */
  .cart-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 999;
    
    .cart-panel-mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
    
    .cart-panel-content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 60vh;
      background-color: #fff;
      border-radius: 24rpx 24rpx 0 0;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    
    .cart-panel-show {
      transform: translateY(0);
    }
    
    .cart-panel-header {
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      
      .cart-panel-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .cart-panel-action {
        font-size: 28rpx;
        color: #999;
        display: flex;
        align-items: center;
        
        .icon-trash {
          margin-right: 6rpx;
        }
      }
    }
    
    .cart-panel-list {
      flex: 1;
      padding: 0 30rpx;
      overflow-y: auto;
      box-sizing: border-box;
      width: 100%;
      .cart-panel-item {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0;
		box-sizing: border-box;
		width: 100%;
        border-bottom: 1px solid #f5f5f5;
        
        .cart-item-left {
          flex: 1;
          overflow: hidden;
          
          .cart-item-name {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 10rpx;
            font-weight: 500;
          }
          
          .cart-item-spec {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .cart-item-right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          
          .cart-item-price {
            font-size: 28rpx;
            color: #fa436a;
            font-weight: 500;
            margin-bottom: 10rpx;
          }
          
          .cart-item-counter {
            display: flex;
            align-items: center;
            
            .counter-btn {
              width: 50rpx;
              height: 50rpx;
              background-color: #f5f5f5;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 32rpx;
              
              &.minus {
                color: #999;
              }
              
              &.plus {
                background-color: #8cc152;
                color: #fff;
              }
            }
            
            .counter-num {
              width: 60rpx;
              text-align: center;
              font-size: 28rpx;
            }
          }
        }
      }
    }
    
    .cart-panel-footer {
      padding: 20rpx 30rpx 50rpx;
      display: flex;
      align-items: center;
      border-top: 1px solid #f5f5f5;
      
      .cart-total {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        
        .cart-total-price {
          font-size: 32rpx;
          color: #fa436a;
          font-weight: bold;
        }
      }
      
      .cart-checkout {
        width: 200rpx;
        height: 80rpx;
        background-color: #8cc152;
        color: #fff;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: 500;
      }
    }
  }

  /* 规格选择器样式 */
  .specs-selector {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
    
    .selector-content {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      border-radius: 24rpx 24rpx 0 0;
      padding: 30rpx;
      box-sizing: border-box;
      
      .close-btn {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        
        .close-icon {
          font-size: 48rpx;
          color: #999;
        }
      }
      
      .product-info {
        display: flex;
        margin-bottom: 30rpx;
        
        .product-image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 12rpx;
          margin-right: 20rpx;
        }
        
        .product-details {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          
          .product-name {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .product-desc {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 12rpx;
            line-height: 1.3;
          }
          
          .product-price {
            font-size: 40rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 8rpx;
          }
          
          .product-size {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
      
      .specs-section {
        margin-bottom: 30rpx;
        
        .section-title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 20rpx;
          font-weight: 500;
        }
        
        .options-list {
          display: flex;
          flex-wrap: wrap;
          
          .option-item {
            height: 60rpx;
            padding: 0 30rpx;
            border-radius: 30rpx;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 20rpx 20rpx 0;
            
            text {
              font-size: 26rpx;
              color: #666;
            }
            
            &.active {
              background-color: #8cc152;
              
              text {
                color: #fff;
              }
            }
          }
        }
      }
      
      .quantity-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40rpx;
        
        .section-title {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
        
        .quantity-selector {
          display: flex;
          align-items: center;
          
          .quantity-btn {
            width: 60rpx;
            height: 60rpx;
            background-color: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
          }
          
          .quantity-value {
            width: 80rpx;
            text-align: center;
            font-size: 32rpx;
            color: #333;
          }
        }
      }
      
      .bottom-actions {
        border-top: 2rpx solid #f5f5f5;
        padding-top: 30rpx;
        
        .selected-info {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 20rpx;
        }
        
        .action-buttons {
          display: flex;
          justify-content: space-between;
          
          .action-btn {
            height: 80rpx;
            border-radius: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            font-weight: 500;
            
            &.buy-now {
              width: 45%;
              background-color: #fff;
              color: #8cc152;
              border: 2rpx solid #8cc152;
            }
            
            &.add-to-cart {
              width: 45%;
              background-color: #8cc152;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style> 